<template>
	<view>
		<view class="" style="padding-bottom: 120rpx;">
			<!-- 显示时间段费用 -->
			<view style="padding: 10rpx;">
				
				<view v-if="currentWeek.data.length <= 0">
					<view class="nullData">
						<view>
							<image src="../../../../static/image/notdata.png" class="nullImage"></image>
						</view>
						<view class="nullText">
							暂无记录
						</view>
					</view>
				</view>
				<view v-else >
					<view  v-for="(timeItem, timeIndex) in currentWeek.data" :key="timeIndex" >
						<view style="padding: 20rpx 20rpx;">
							
							<view class="venueForm" style="position: relative;">
								<view class="clear" @click="deleteLocationCost(timeItem.id, timeIndex)">
									x
								</view>
								<view class="form-row">
									<view class="ftitle"><text class="required">*</text>开始时间</view>
									<view class="fvalue">
										<picker mode="time" :value="timeItem.startTime" @change="onChooseTime($event,timeIndex,'startTime')">
											<view class="fvalue" >
												{{ timeItem.startTime || '请选择开始时间' }}
											</view>
										</picker>
									</view>
								</view>
								<view class="height30"></view>
								<view class="form-row">
									<view class="ftitle"><text class="required">*</text>结束时间</view>
									<view class="fvalue">
										<picker mode="time" :value="timeItem.endTime" @change="onChooseTime($event,timeIndex,'endTime')">
											<view class="fvalue" >
												{{ timeItem.endTime || '请选择结束时间' }}
											</view>
										</picker>
									</view>
								</view>
								<view class="height30"></view>
								<view class="form-row">
									<view class="ftitle"><text class="required">*</text>缴费金额</view>
									<input class="fvalue" v-model="timeItem.amount" type="number"  placeholder="输入联系电话"  />
								</view>
								<view class="height30"  v-if="feeModel == 2"></view>
								<view class="form-row"  v-if="feeModel == 2">
									<view class="ftitle"><text class="required">*</text>发售数量</view>
									<input class="fvalue" v-model="timeItem.maxSale" type="number"  placeholder="输入联系电话"  />
								</view>
								<view class="height30"></view>
								<view class="form-row">
									<view class="ftitle"><text class="required">*</text>是否禁用</view>
									<view class="fvalue">
										<view style="padding: 25rpx 0rpx;">
											<u-radio-group v-model="timeItem.enable" placement="row" activeColor="#06ADAB">
												<u-radio size="35rpx" :name="1" label="是" labelSize="33rpx"></u-radio>
												<u-radio size="35rpx" :name="0" label="否" :customStyle="{marginLeft: '30rpx'}" labelSize="33rpx"></u-radio>
											</u-radio-group>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<view style="position: fixed;bottom: 0px;z-index: 10;width: 100%;height: 100rpx;">
			<view style="display: flex;">
				<view style="width: 40%;background-color: #ffffff;text-align: center;height: 100rpx;line-height: 100rpx;" @click="addRow">
					+ 增加行
				</view>
				<view @click="saveCost" style="background-color: #155ccf;text-align: center;width: 60%;height: 100rpx;line-height: 100rpx;color: #ffffff;font-size: 33rpx;">
					保 存
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//场地ID
				venueLocationId: '',
				//收费模式(1:按时段预约收费 2:按单次收费)
				feeModel: 1,
				//当前选择的星期和值
				currentWeek: {
					week: 1,
					data: []
				}
			}
		},
		onLoad(option) {
			//场地ID
			var feeModel = option.feeModel;
			var venueLocationId = option.id;
			var week = option.week;
			this.currentWeek.week = week;
			this.feeModel = feeModel;
			this.venueLocationId = venueLocationId;
		},
		onShow() {
			this.getLocationCostList();
		},
		methods: {
			//获取费用列表
			getLocationCostList(){
				this.currentWeek.data = [];
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				var params = {};
				params.venueLocationId = this.venueLocationId;
				params.week = this.currentWeek.week;
				params.feeModel = this.feeModel.toString();
				this.$request({
					url: '/blade-merchant-app/merchant-app/venue-location/get-location-cost-list',
					type: 'POST',
					data: params
				}).then(res => {
					uni.hideLoading();
					var records = res.data;
					if(records.length > 0){
						records.forEach(item => {
							var st = item.startTime.split(':');
							item.startTime = st[0]+':'+st[1];
							var et = item.endTime.split(':');
							item.endTime = et[0]+':'+et[1];
						})
					}
					this.currentWeek.data = records;
				}).catch(err =>{
					
				})
			},
			//切换费用类型
			feeModelChange(e){
				this.feeModel = (e+1)
				this.getLocationCostList();
			},
			//点击星期事件
			weekClick(e){
				this.currentWeek.week = e.key;
				//获取某个星期的费用设置
				this.getLocationCostList();
			},
			//删除费用
			deleteLocationCost(id, index) {
				if(id) {
					var that = this;
					uni.showModal({
					   title: '删除操作',
					   content: '此时间点原已设置，是否确认删除？',
					   showCancel: true,
					   success: function (res) {
						   if (res.confirm) {
								uni.showLoading({
									title: '操作中',
									mask: true
								})
								that.$request({
									url: `/blade-merchant-app/merchant-app/venue-location/batch-delete-location-cost?ids=${id}`,
									type: 'POST',
									data: {
										ids: id
									}
								}).then(res => {
									setTimeout(()=>{
										uni.hideLoading();
										uni.$u.toast("删除成功")
										that.currentWeek.data.splice(index, 1);
									},800)
								}).catch(err =>{
									uni.hideLoading();
								})
						   }
					   }
					});
				} else {
					this.currentWeek.data.splice(index, 1);
				}
			},
			//选择开始时间和结束时间后的回调
			onChooseTime(e,timeIndex,filed){
				this.currentWeek.data[timeIndex][filed] = e.detail.value;
			},
			//增加行
			addRow() {
				var d = {};
				d.amount = "0.00";
				var startTime = "00:00";
				//存在上一个时间则取结束日期为当前开始日期
				if(this.currentWeek.data.length>0){
					startTime = this.currentWeek.data[(this.currentWeek.data.length-1)].endTime;
				}
				d.startTime = startTime;
				d.endTime = "23:00";
				d.maxSale = 0;
				d.enable = 0; 
				
				this.currentWeek.data.push(d);
			},
			//批量保存
			saveCost(){
				var that = this;
				var params = {};
				params.feeModel = this.feeModel;
				params.venueLocationId = this.venueLocationId;
				params.weeks = [this.currentWeek.week];
				if(this.currentWeek.data.length <=0){
					uni.$u.toast("请点击左边增加填写信息后保存")
					return ;
				}
				params.list = this.currentWeek.data;
				
				
				
				uni.showModal({
				   title: '保存操作',
				   content: '是否确认保存场地预约时间点？',
				   showCancel: true,
				   success: function (res) {
					   if (res.confirm) {
							uni.showLoading({
								title: '操作中',
								mask: true
							})
							that.$request({
								url: `/blade-merchant-app/merchant-app/venue-location/save-batch-location-cost`,
								type: 'POST',
								data: params
							}).then(res => {
								setTimeout(()=>{
									uni.hideLoading();
									uni.$u.toast("保存成功")
									that.getLocationCostList();
								},800)
							}).catch(err =>{
								uni.hideLoading();
							})
					   }
				   }
				});
			},
			onLink(url) {
				uni.navigateTo({ url: url })
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f1f1f1;
		
		.bg-f1f1f1 {
			background: #f1f1f1;
		}
		
		.height30 {
			height: 30rpx;
		}
		
		.venueForm {
			padding: 30rpx;
			background-color: #ffffff;
			position: sticky;
			
			.textareaTitle {
				padding-bottom: 20rpx;font-size: 33rpx;color: #444444;font-weight: 600;line-height: 45rpx;
				
				.required {
					color: red;
				}
			}
			
			.form-row {
				border-radius: 0rpx;display: flex;border: 1px solid #c3c3c3;justify-content: center;align-items: center; 
				
				.ftitle {
					text-align: center;
					font-size: 30rpx;
					width: 180rpx;
					display: inline-table;
					color: #333333;
					padding:0rpx 10rpx;
					
					.required {
						color: red;
					}
				}
				.fvalue {
					height: 90rpx;width: 100%;font-size: 32rpx;line-height: 90rpx;
				}
			
			}
			
			.submitBtn {
				height: 90rpx;background-color: #0544ab;color: #ffffff;line-height: 90rpx;font-size: 32rpx;
			}
			
		}
		
		.nullData {
			height: 100%;
			text-align: center;
			padding-top: 10%;
			
			.nullImage {
				width: 220rpx;height: 220rpx;
			}
			.nullText {
				color:#666666;font-size:29rpx;padding-top:15rpx;text-align: center;
			}
			
		}
		
		.clear {
			position: absolute;top: -10rpx;right: -10rpx;color: #ffffff; width:50rpx;height: 50rpx;background-color: #999999;border-radius: 50rpx;text-align: center;
		}
		
	}

</style>
